<template>
  <div class="register-container">
    <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form" auto-complete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">用户注册</h3>
      </div>
      
      <el-form-item prop="username">
        <el-input
          v-model="registerForm.username"
          placeholder="用户名"
          name="username"
          type="text"
          auto-complete="on"
          prefix-icon="User"
        />
      </el-form-item>
      
      <el-form-item prop="password">
        <el-input
          v-model="registerForm.password"
          placeholder="密码"
          name="password"
          :type="passwordType"
          auto-complete="on"
          prefix-icon="Lock"
          @keyup.enter="handleRegister"
        />
        <span class="show-pwd" @click="showPwd">
          <el-icon><View v-if="passwordType === 'password'" /><Hide v-else /></el-icon>
        </span>
      </el-form-item>
      
      <el-form-item prop="confirmPassword">
        <el-input
          v-model="registerForm.confirmPassword"
          placeholder="确认密码"
          name="confirmPassword"
          :type="passwordType"
          auto-complete="on"
          prefix-icon="Lock"
          @keyup.enter="handleRegister"
        />
      </el-form-item>
      
      <el-form-item prop="email">
        <el-input
          v-model="registerForm.email"
          placeholder="邮箱"
          name="email"
          type="email"
          auto-complete="on"
          prefix-icon="Message"
        />
      </el-form-item>
      
      <el-button :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px;" @click.prevent="handleRegister">注册</el-button>
      
      <div class="tips">
        <span>已有账号? </span>
        <router-link to="/login">立即登录</router-link>
      </div>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { User, Lock, Message, View, Hide } from '@element-plus/icons-vue';
import { validUsername, validPassword, validEmail } from '@/utils/validate';
import { register } from '@/api/user';

export default {
  name: 'Register',
  components: {
    User,
    Lock,
    Message,
    View,
    Hide
  },
  setup() {
    const router = useRouter();
    const loading = ref(false);
    const passwordType = ref('password');
    
    const registerForm = reactive({
      username: '',
      password: '',
      confirmPassword: '',
      email: ''
    });
    
    const validateUsername = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入用户名'));
      } else if (value.length < 4 || value.length > 20) {
        callback(new Error('用户名长度应在4-20个字符之间'));
      } else {
        callback();
      }
    };
    
    const validatePassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入密码'));
      } else if (!validPassword(value)) {
        callback(new Error('密码必须包含字母和数字，长度在8-20之间'));
      } else {
        callback();
      }
    };
    
    const validateConfirmPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请确认密码'));
      } else if (value !== registerForm.password) {
        callback(new Error('两次输入密码不一致'));
      } else {
        callback();
      }
    };
    
    const validateEmail = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入邮箱'));
      } else if (!validEmail(value)) {
        callback(new Error('请输入正确的邮箱格式'));
      } else {
        callback();
      }
    };
    
    const registerRules = {
      username: [{ required: true, trigger: 'blur', validator: validateUsername }],
      password: [{ required: true, trigger: 'blur', validator: validatePassword }],
      confirmPassword: [{ required: true, trigger: 'blur', validator: validateConfirmPassword }],
      email: [{ required: true, trigger: 'blur', validator: validateEmail }]
    };
    
    const showPwd = () => {
      passwordType.value = passwordType.value === 'password' ? '' : 'password';
    };
    
    const handleRegister = () => {
      loading.value = true;
      register({
        username: registerForm.username,
        password: registerForm.password,
        email: registerForm.email
      }).then(() => {
        loading.value = false;
        ElMessage({
          message: '注册成功，请登录',
          type: 'success',
          duration: 2000
        });
        router.push('/login');
      }).catch(() => {
        loading.value = false;
      });
    };
    
    return {
      registerForm,
      registerRules,
      loading,
      passwordType,
      showPwd,
      handleRegister
    };
  }
};
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as vars;

.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
  
  .register-form {
    width: 400px;
    max-width: 100%;
    padding: 30px 35px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    
    .title-container {
      position: relative;
      
      .title {
        font-size: 26px;
        color: vars.$text-primary;
        margin: 0 auto 30px;
        text-align: center;
        font-weight: bold;
      }
    }
    
    .show-pwd {
      position: absolute;
      right: 10px;
      top: 7px;
      font-size: 16px;
      color: #889aa4;
      cursor: pointer;
      user-select: none;
    }
    
    .tips {
      font-size: 14px;
      color: vars.$text-regular;
      text-align: center;
      
      a {
        color: vars.$primary-color;
        text-decoration: none;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style> 